<template>
  <div class="app-container">
    <el-card>
      <PageSearch
        v-permission="`get:/sys/role/list`"
        :search-fields="searchFields"
        :load-data="getList"
        :page-param="pageParam"
      />

      <el-row style="display: inline-flex" :gutter="20">
        <el-col>
          <el-button
            v-permission="`post:/sys/role/delete`"
            type="danger"
            plain
            icon="el-icon-delete"
            :disabled="selection.length===0"
            @click.native.prevent="handleDelete"
          >删除
          </el-button>
        </el-col>

        <el-col>
          <el-button
            v-permission="`post:/sys/role/add`"
            type="primary"
            plain
            icon="el-icon-plus"
            @click.native.prevent="openAdd"
          >添加
          </el-button>
        </el-col>

        <el-col>
          <el-button
            v-permission="`post:/sys/role/edite`"
            type="success"
            plain
            icon="el-icon-edit"
            :disabled="selection.length!==1"
            @click.native.prevent="openEdite"
          >编辑
          </el-button>
        </el-col>

        <el-col>
          <el-button
            v-permission="`post:/sys/role/auth/update`"
            type="success"
            plain
            icon="el-icon-edit"
            :disabled="selection.length!==1"
            @click.native.prevent="openAuth"
          >授权
          </el-button>
        </el-col>
      </el-row>
      <PageTable
        v-permission="`get:/sys/role/list`"
        :page-param="pageParam"
        :load-data="getList"
        :selection="selection"
        :columns="tableColumns"
        :datalist="datalist"
      />

      <FormDialog
        ref="addDialog"
        :submit="dialog.submit"
        :title="dialog.title"
        :fields="dialog.fields"
        :rules="dialog.rules"
        :add-form="dialog.addForm"
        :handle-ok="dialog.handleOk"
      />

      <FormDialog
        ref="editeDialog"
        :submit="editeDialog.submit"
        :title="editeDialog.title"
        :fields="editeDialog.fields"
        :rules="editeDialog.rules"
        :add-form="editeDialog.addForm"
        :handle-ok="editeDialog.handleOk"
      />
      <el-dialog width="450px" title="授权" :visible.sync="authShow" @close="checkedKeys=[]">
        <el-tree
          ref="authTree"
          :data="authTree"
          show-checkbox
          default-expand-all
          node-key="menuId"
          highlight-current
          :default-checked-keys="checkedKeys"
          :props="{label:'name',children: 'children'}"
        />

        <span slot="footer" class="dialog-footer">
          <el-button @click="authShow=false">取 消</el-button>
          <el-button type="primary" @click="handleAuthSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import PageSearch from '@/pp-components/PageSearch.vue'
import PageTable from '@/pp-components/PageTable.vue'
import { authUpdate, getList, del, add, edite, authGet } from '@/api/pp/sys/role'
import { tree } from '@/api/pp/sys/menu'
import FormDialog from '@/pp-components/FormDialog.vue'
import permission from '@/directive/permission/index.js'
export default {
  components: { FormDialog, PageSearch, PageTable },
  directives: { permission },
  data() {
    return {
      authTree: [],
      authShow: false,
      checkedKeys: [],
      dialog: {
        title: '添加角色',
        rules: { name: [{ required: true, trigger: 'blur', message: '角色名不为空' }] },
        addForm: {},
        handleOk: this.getList,
        fields: [{ name: 'name', label: '角色名' }],
        submit: add
      },
      editeDialog: {
        title: '编辑角色',
        rules: { name: [{ required: true, trigger: 'blur', message: '角色名不为空' }] },
        addForm: {},
        handleOk: this.getList,
        fields: [{ name: 'name', label: '角色名' }],
        submit: edite
      },
      tableColumns: [
        { prop: 'name', label: '角色名' }
      ],
      selection: [],
      datalist: [],
      searchFields: [
        { name: 'name', placeholder: '输入角色名' }
      ],
      pageParam: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getMenuTree() {
      tree().then(res => {
        this.authTree = res.data
      })
    },
    handleAuthSubmit() {
      const menuIds = [
        ...this.$refs.authTree.getCheckedKeys(),
        ...this.$refs.authTree.getHalfCheckedKeys()
      ]

      authUpdate({ menuIds, roleId: this.selection[0].roleId })
        .then(res => {
          this.$msgOk(res)
          this.authShow = false
          this.checkedKeys = []
        })
    },
    openAuth() {
      this.getMenuTree()
      this.authShow = true
      authGet(this.selection[0].roleId).then(res => {
        this.checkedKeys = res.data.filter(
          (item) =>
            this.$refs.authTree.getNode(item) &&
            this.$refs.authTree.getNode(item).isLeaf
        )
      })
    },
    openAdd() {
      this.$refs.addDialog.show()
    },
    openEdite() {
      this.editeDialog.addForm = this.selection[0]
      this.$refs.editeDialog.show()
    },
    handleDelete() {
      this.$ask({ message: '确认删除' }).then(() => {
        const roleIds = []
        this.selection.forEach(e => {
          roleIds.push(e.roleId)
        })
        del(roleIds.join(',')).then(res => {
          this.$msgOk(res)
          this.getList()
        })
      })
    },
    getList() {
      getList(this.pageParam).then(res => {
        this.pageParam.total = res.data.total
        this.datalist = res.data.list
      })
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
